<template>
  <!-- 主菜单下拉框
  -------------------------- -->
  <el-dropdown class="comp-header-menu-dropdown"
    @command="changeDropdown">

    <span class="comp-header-menu-dropdown__dropdown"
      layout layout-align="center center">
      <i class="iconfont icon-liebiao7"></i>
      {{ CurrentMenu }}
    </span>

    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item, index) in dropdownList"
        :key="index"
        :command="item"
        :disabled="item === CurrentMenu">{{ item }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { MENU_CONFIG } from 'services/Config'
import { mapState } from 'vuex'

export default {
  name: 'CompHeaderMenuDropdown',
  computed: {
    ...mapState([
      'CurrentMenu'
    ]),
    // 下拉菜单数据
    dropdownList () {
      return MENU_CONFIG.map(i => i.name)
    }
  },
  methods: {
    // 下拉数据改变
    changeDropdown (v) {
      this.$store.commit('SetCurrentMenu', v)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(header-menu-dropdown) {

  @include e(dropdown) {
    height: $--header-height;
    line-height: $--header-height;
    border-top: 4px solid $--color-primary;
    border-bottom: 4px solid transparent;
    padding: 0 $--padding-base * 0.2;
    cursor: pointer;
    i {
      margin-right: $--margin-base * 0.5;
    }
  }
}
</style>